<template>
  <view class="container">
    <!-- 非遗文化背景 -->
    <image 
      class="cultural-bg" 
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine_bg.png" 
      mode="aspectFill"
    ></image>

    <!-- 注册卡片 -->
    <view class="register-card">
      <!-- 传统装饰元素 -->
      <image 
        class="horn-decoration top-left" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>
      <image 
        class="horn-decoration top-right" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>

      <view class="content">
        <text class="title">非遗掼牛传承人注册</text>

        <!-- 表单区域 -->
        <view class="form-group">
          <!-- 手机号输入 -->
          <view class="form-item">
            <image class="input-icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/phone.png"></image>
            <input
              class="cultural-input"
              type="number"
              v-model="mobile"
              placeholder="请输入传承人手机号"
              maxlength="11"
              @input="validateMobile"
            />
            <text class="error-msg">{{ mobileError }}</text>
          </view>

          <!-- 密码输入 -->
          <view class="form-item">
            <image class="input-icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/密码.png"></image>
            <input
              class="cultural-input"
              password
              v-model="password"
              placeholder="设置传承密码（6-20位）"
              @input="validatePassword"
            />
            <text class="error-msg">{{ passwordError }}</text>
          </view>

          <!-- 确认密码 -->
          <view class="form-item">
            <image class="input-icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/密码.png"></image>
            <input
              class="cultural-input"
              password
              v-model="confirmPassword"
              placeholder="确认传承密码"
              @input="validateConfirm"
            />
            <text class="error-msg">{{ confirmError }}</text>
          </view>
        </view>

        <!-- 注册按钮 -->
        <button 
          class="register-btn"
          :class="{ disabled: !canSubmit }"
          @tap="handleRegister"
          :loading="loading"
        >
          <text class="btn-text">{{ loading ? '传承登记中...' : '成为传承人' }}</text>
        </button>

        <!-- 协议条款 -->
        <view class="agreement">
          <checkbox-group @change="toggleAgree">
            <checkbox :checked="agreed" color="#8B4513"/>
          </checkbox-group>
          <text class="agreement-text">
            已阅读并同意
            <text class="link" @tap="navToProtocol">《用户协议》</text>
          </text>
        </view>

        <!-- 已有账号 -->
        <view class="login-link">
          <text>已是传承人？</text>
          <text class="link-text" @tap="navigateToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: '',
      password: '',
      confirmPassword: '',
      agreed: false,
      mobileError: '',
      passwordError: '',
      confirmError: '',
      loading: false
    }
  },
  computed: {
    canSubmit() {
      return (
        !this.mobileError &&
        !this.passwordError &&
        !this.confirmError &&
        this.mobile &&
        this.password &&
        this.confirmPassword &&
        this.agreed
      )
    }
  },
  methods: {
    // 手机验证
    validateMobile() {
      const reg = /^1[3-9]\d{9}$/
      if (!this.mobile) {
        this.mobileError = '请输入斗牛世家联系方式'
      } else if (!reg.test(this.mobile)) {
        this.mobileError = '牛角号需11位数字'
      } else {
        this.mobileError = ''
      }
    },

    // 密码验证
    validatePassword() {
      const reg = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/
      if (!this.password) {
        this.passwordError = '请设置斗牛密语'
      } else if (!reg.test(this.password)) {
        this.passwordError = '需字母数字组合'
      } else {
        this.passwordError = ''
      }
    },

    // 确认密码验证
    validateConfirm() {
      if (this.confirmPassword !== this.password) {
        this.confirmError = '斗牛密语不一致'
      } else {
        this.confirmError = ''
      }
    },

    // 协议勾选
    toggleAgree(e) {
      this.agreed = !!e.detail.value.length
    },

    // 跳转登录
    navigateToLogin() {
      uni.navigateTo({
        url:'/pages/login/login'
      })
    },

    // 注册处理
    async handleRegister() {
      // 执行最终验证
      this.validateMobile()
      this.validatePassword()
      this.validateConfirm()

      // 阻止无效提交
      if (!this.canSubmit) {
        uni.showToast({
          title: '请完善斗牛传承信息',
          icon: 'none',
          duration: 2000
        })
        return
      }

      this.loading = true
      try {
        const res = await uniCloud.callFunction({
          name: 'register',
          data: {
            mobile: this.mobile,
            password: this.password
          }
        })

        if (res.result.code === 0) {
          uni.showToast({
            title: '注册成功，稍后跳转登录页面进行登录！',
            icon: 'none',
            duration: 1500
          })
          
          // 1.5秒后跳转登录
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }, 1500)
        } else {
          // 处理不同错误码
          const errorMap = {
            4001: '账号密码格式有误，请重新输入',
            4002: '该账号已注册，请直接登录',
            500: '服务器开小差，请联系管理员'
          }
          uni.showToast({
            title: errorMap[res.result.code] || '传承登记失败',
            icon: 'none',
            duration: 3000
          })
        }
      } catch (error) {
        console.error('注册请求失败:', error)
        uni.showToast({
          title: '牛魂网络不稳定，请检查连接',
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.loading = false
      }
    },

    // 查看协议
    navToProtocol() {
      uni.navigateTo({
        url: '/pages/protocol/protocol'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 保持原有样式不变 */
.container {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.cultural-bg {
  width: 100%;
  height: 100%;
  filter: brightness(0.8) sepia(0.3);
}

.register-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  background: rgba(255, 248, 240, 0.95);
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(139, 69, 19, 0.3);

  .horn-decoration {
    position: absolute;
    width: 120rpx;
    height: 180rpx;
    
    &.top-left {
      top: -80rpx;
      left: -40rpx;
    }
    
    &.top-right {
      top: -80rpx;
      right: -40rpx;
      transform: scaleX(-1);
    }
  }
}

.title {
  display: block;
  font-size: 44rpx;
  color: #8B4513;
  text-align: center;
  margin-bottom: 60rpx;
  font-weight: bold;
  letter-spacing: 4rpx;
  text-shadow: 2rpx 2rpx 4rpx rgba(255, 228, 196, 0.5);
}

.form-group {
  margin: 40rpx 0;
}

.form-item {
  margin-bottom: 60rpx;
  position: relative;

  .input-icon {
    position: absolute;
    left: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 40rpx;
    height: 40rpx;
    z-index: 2;
  }
}

.cultural-input {
  height: 100rpx;
  padding: 0 30rpx 0 90rpx;
  background: #FFF;
  border: 2rpx solid #D2B48C;
  border-radius: 50rpx;
  font-size: 32rpx;
  color: #8B4513;
  transition: all 0.3s;

  &:focus {
    border-color: #8B4513;
    box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.1);
  }
}

.error-msg {
  position: absolute;
  bottom: -40rpx;
  left: 30rpx;
  font-size: 24rpx;
  color: #c0392b;
}

.register-btn {
  height: 100rpx;
  line-height: 100rpx;
  background: linear-gradient(45deg, #8B4513, #A0522D);
  color: #FFE4C4;
  font-size: 34rpx;
  border-radius: 50rpx;
  margin: 40rpx 0;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.5s;
  }

  &:active::after {
    left: 100%;
  }

  &.disabled {
    background: #D2B48C;
    opacity: 0.8;
  }
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx 0;

  .agreement-text {
    font-size: 24rpx;
    color: #8B4513;
    margin-left: 10rpx;
  }

  .link {
    color: #A0522D;
    text-decoration: underline;
  }
}

.login-link {
  text-align: center;
  font-size: 28rpx;
  color: #8B4513;

  .link-text {
    color: #A0522D;
    text-decoration: underline;
    margin-left: 15rpx;
  }
}
</style>